<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮胎可视化管理系统</title>
  <style>
    /* 样式代码与之前提供的一致 */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Microsoft YaHei', Arial, sans-serif; background-color: #f5f5f5; padding: 20px; }
    .container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; }
    .header { text-align: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
    .search-box { display: flex; justify-content: center; margin-bottom: 20px; gap: 10px; }
    .search-box input { padding: 10px; border: 1px solid #ddd; border-radius: 5px; width: 300px; font-size: 16px; }
    .search-box button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
    .search-box button:hover { background: #0056b3; }
    .trailer-container { position: relative; width: 800px; height: 700px; margin: 0 auto; border: 2px solid #333; border-radius: 10px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); overflow: hidden; }
    .trailer-body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 200px; background: #6c757d; border-radius: 20px; }
    .axle { position: absolute; width: 400px; height: 4px; background: #495057; left: 50px; }
    .tire-position { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #333; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; text-align: center; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.9); }
    .tire-position.has-tire { background: #28a745; color: white; border-color: #1e7e34; }
    .tire-position.has-tire.warning { background: #ffc107; color: black; border-color: #e0a800; }
    .tire-position.has-tire.danger { background: #dc3545; color: white; border-color: #c82333; }
    .tire-position:hover { transform: scale(1.1); z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
    .info-panel { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); width: 300px; background: white; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 20px; display: none; z-index: 1000; }
    .info-panel h3 { margin-bottom: 15px; color: #333; border-bottom: 1px solid #eee; padding-bottom: 10px; }
    .info-item { margin-bottom: 8px; display: flex; justify-content: space-between; }
    .info-label { font-weight: bold; color: #666; }
    .info-value { color: #333; }
    .no-tire { color: #999; font-style: italic; }
    .close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 20px; cursor: pointer; color: #999; }
    .close-btn:hover { color: #333; }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>🚛 轮胎可视化管理系统</h1>
  </div>

  <div class="search-box">
    <input type="text" id="plateInput" placeholder="请输入车牌号（如：苏M999）">
    <button onclick="loadTrailer()">加载轮胎信息</button>
  </div>

  <div class="trailer-container" id="trailerContainer">
    <div class="trailer-body"></div>
    <div class="axle" style="top: 280px;"></div>
    <div class="axle" style="top: 330px;"></div>
    <div class="axle" style="top: 380px;"></div>
    <div class="axle" style="top: 430px;"></div>
    <div class="axle" style="top: 480px;"></div>
    <div class="axle" style="top: 530px;"></div>
  </div>

  <div class="info-panel" id="infoPanel">
    <button class="close-btn" onclick="closeInfoPanel()">&times;</button>
    <h3>轮胎详细信息</h3>
    <div id="tireDetails"></div>
  </div>
</div>

<script>
  class TireVisualization {
    constructor() {
      this.currentPlate = '';
      this.tireData = [];
    }

    async loadTrailer(plateNumber) {
      try {
        const response = await fetch(`/api/tires/visualization/trailer/${encodeURIComponent(plateNumber)}`);
        if (!response.ok) {
          throw new Error('加载数据失败');
        }

        const data = await response.json();
        this.currentPlate = plateNumber;
        this.tireData = data.positions;

        this.renderTrailer();
      } catch (error) {
        alert('加载轮胎数据失败：' + error.message);
        console.error('Error:', error);
      }
    }

    renderTrailer() {
      const container = document.getElementById('trailerContainer');

      // 清除现有的轮胎标记
      document.querySelectorAll('.tire-position').forEach(el => el.remove());

      this.tireData.forEach(position => {
        const tireElement = this.createTireElement(position);
        container.appendChild(tireElement);
      });

      // 更新标题显示车牌
      document.querySelector('.header h1').textContent =
              `🚛 轮胎可视化管理系统 - ${this.currentPlate}`;
    }

    createTireElement(position) {
      const element = document.createElement('div');
      element.className = 'tire-position';
      element.style.left = position.x + 'px';
      element.style.top = position.y + 'px';
      element.textContent = position.positionKey;
      element.title = position.positionKey;

      if (position.hasTire) {
        element.classList.add('has-tire');

        // 根据里程判断状态
        const mileage = position.tireInfo.currentMileage || 0;
        if (mileage > 200000) {
          element.classList.add('danger');
        } else if (mileage > 100000) {
          element.classList.add('warning');
        }
      }

      element.addEventListener('click', () => {
        this.showTireInfo(position);
      });

      return element;
    }

    showTireInfo(position) {
      const panel = document.getElementById('infoPanel');
      const details = document.getElementById('tireDetails');

      if (position.hasTire) {
        const tire = position.tireInfo;
        details.innerHTML = `
                        <div class="info-item">
                            <span class="info-label">位置：</span>
                            <span class="info-value">${position.positionKey}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">轮胎编号：</span>
                            <span class="info-value">${tire.tireNumber}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">品牌型号：</span>
                            <span class="info-value">${tire.tireBrand} ${tire.tireModel}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">运输公司：</span>
                            <span class="info-value">${tire.transportCompany}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">当前里程：</span>
                            <span class="info-value">${tire.currentMileage ? tire.currentMileage.toLocaleString() + '公里' : '未知'}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">安装日期：</span>
                            <span class="info-value">${tire.installDate || '未知'}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">花纹深度：</span>
                            <span class="info-value">${tire.treadDepth ? tire.treadDepth.toFixed(1) + 'mm' : '未知'}</span>
                        </div>
                    `;
      } else {
        details.innerHTML = `
                        <div class="info-item">
                            <span class="info-label">位置：</span>
                            <span class="info-value">${position.positionKey}</span>
                        </div>
                        <div class="no-tire">该位置暂无轮胎</div>
                        <button onclick="addTire('${position.axleNumber}', '${position.tirePosition}')"
                                style="margin-top: 15px; padding: 8px 15px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">
                            添加轮胎
                        </button>
                    `;
      }

      panel.style.display = 'block';
    }
  }

  // 全局实例
  const tireViz = new TireVisualization();

  // 全局函数
  function loadTrailer() {
    const plateInput = document.getElementById('plateInput');
    const plateNumber = plateInput.value.trim();

    if (!plateNumber) {
      alert('请输入车牌号');
      plateInput.focus();
      return;
    }

    tireViz.loadTrailer(plateNumber);
  }

  function closeInfoPanel() {
    document.getElementById('infoPanel').style.display = 'none';
  }

  function addTire(axleNumber, tirePosition) {
    if (confirm(`是否要为 ${axleNumber}轴${tirePosition} 添加轮胎？`)) {
      // 这里可以打开添加轮胎的模态窗口或跳转到添加页面
      window.open(`/tire/add?trailerPlate=${tireViz.currentPlate}&axle=${axleNumber}&position=${tirePosition}`);
    }
  }

  // 回车键搜索
  document.getElementById('plateInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      loadTrailer();
    }
  });

  // 页面加载时示例加载
  window.addEventListener('load', function() {
    document.getElementById('plateInput').focus();
  });
</script>
</body>
</html>